<template>
    <div :class="navData.title === undefined ? '' : 'appHasNav'">
        <!-- 导航栏组件预留位 -->
<!--        内容主体-->

        <div id="content">
            <router-view></router-view>
<!--           s-->
        </div>
    </div>
</template>

<script>
import {reactive, toRefs} from "vue";

export default {
    name: "App",
    components: {},
    setup() {
        const state = reactive({
            navData: {title: undefined, back: false},
        });

        return {
            ...toRefs(state),
        };
    },
    mounted() {
        let isLoad = localStorage.getItem('isLoad');
        localStorage.setItem('isLoad', '1');
        if (!isLoad) {
            window.location.reload();
        } else {
            let playerUIElement = document.getElementById("playerUI");
            if (playerUIElement) {
                playerUIElement.style.display = "block";
                window.addEventListener("load", () => {
                    window?.loads(); //webrtc
                });

                window?.addResponseEventListener("printMessage", (data) => {
                    console.log("接收到消息", data)
                    data = eval("[{" + data + "}]");
                    console.log("接收到消息", data);
                    if (true) { //判断条件
                        // 执行弹窗
                        console.log("接收到消息", data);
                    }
                });
            }
        }

    },
    watch: {
        //使用watch 监听$router的变化
        $route(to, from) {
            //如果to索引大于from索引,判断为前进状态,反之则为后退状态
            this.navData = to.meta;
        },
    },
};
</script>

<style lang="scss" >
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); //rotate(90deg)
  pointer-events: none;
}

.appHasNav {
  padding-top: 0.88rem;
}
</style>
